page {
  --sar-indexes-anchor-padding: 0 16px;
  --sar-indexes-anchor-font-size: var(--sar-text-base);
  --sar-indexes-anchor-line-height: 32px;
  --sar-indexes-anchor-color: var(--sar-tertiary-color);
  --sar-indexes-anchor-bg: var(--sar-body-bg);

  --sar-indexes-nav-padding-right: 4px;

  --sar-indexes-nav-item-font-size: 12px;
  --sar-indexes-nav-item-size: 20px;
  --sar-indexes-nav-item-color: var(--sar-body-color);
  --sar-indexes-nav-item-active-color: var(--sar-white);
  --sar-indexes-nav-item-active-bg: var(--sar-primary);

  --sar-indexes-hint-size: 50px;
  --sar-indexes-hint-margin-right: 4px;
  --sar-indexes-hint-bg: var(--sar-mask);
  --sar-indexes-hint-duration: var(--sar-duration);

  --sar-indexes-hint-text-font-size: 24px;
  --sar-indexes-hint-text-color: var(--sar-white);
}